<template>
  <div style="width: 100%;height: 100%;">
    <div id="main2" style="width: 100%;height: 100%;"></div>
  </div>
</template>
<script>
const echarts = require('echarts')
export default {
  name: '',
  components: {
  },
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    this.drawChart()
  },
  methods: {
    drawChart () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main2'))
      var plantCap = [{
        name: '保管期限（永久）',
        value: '25万个'
      }, {
        name: '保管期限（50年）',
        value: '3600万'
      }, {
        name: '保管期限（30年）',
        value: '7纳米'
      }, {
        name: '保管期限（10年）',
        value: '130款'
      }, {
        name: '保管期限（长期）',
        value: '3600万'
      }, {
        name: '保管期限（短期）',
        value: '700万'
      }]
      var datalist = [{
        offset: [50, 50],
        symbolSize: 120,
        opacity: 0.95,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#29c0fb'
        }, {
          offset: 1,
          color: '#2dc5b9'
        }])
      }, {
        offset: [38, 75],
        symbolSize: 65,
        opacity: 0.68,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#35d17e'
        }, {
          offset: 1,
          color: '#49ddb2'
        }])
      }, {
        offset: [68, 40],
        symbolSize: 65,
        opacity: 0.95,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#277aec'
        }, {
          offset: 1,
          color: '#57c5ec'
        }])
      }, {
        offset: [32, 40],
        symbolSize: 65,
        opacity: 0.95,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#e54948'
        }, {
          offset: 1,
          color: '#f08456'
        }])
      }, {
        offset: [50, 15],
        symbolSize: 68,
        opacity: 0.7,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#11c46e'
        }, {
          offset: 1,
          color: '#f08456'
        }])
      }, {
        offset: [65, 75],
        symbolSize: 65,
        opacity: 0.68,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#ff4141'
        }, {
          offset: 1,
          color: '#ff8989'
        }])
      }]
      var datas = []
      for (var i = 0; i < plantCap.length; i++) {
        var item = plantCap[i]
        var itemToStyle = datalist[i]
        datas.push({
          name: item.name + '\n' + item.value,
          value: itemToStyle.offset,
          symbolSize: itemToStyle.symbolSize,
          label: {
            normal: {
              textStyle: {
                fontSize: 13,
                lineHeight: 17
              }
            }
          },
          itemStyle: {
            normal: {
              color: itemToStyle.color,
              opacity: itemToStyle.opacity
            }
          }
        })
      }
      var option = {
        backgroundColor: '#0A2E5D',
        grid: {
          show: false,
          top: 10,
          bottom: 10
        },
        xAxis: [{
          gridIndex: 0,
          type: 'value',
          show: false,
          min: 0,
          max: 100,
          nameLocation: 'middle',
          nameGap: 5
        }],
        yAxis: [{
          gridIndex: 0,
          min: 0,
          show: false,
          max: 100,
          nameLocation: 'middle',
          nameGap: 30
        }],
        series: [{
          type: 'effectScatter',
          // symbol: 'circle',
          // symbolSize: 120,
          symbolSize: function (val) {
            return Math.max(val[2] / 100, 8)
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              show: true,
              formatter: '{b}',
              color: '#fff',
              textStyle: {
                fontSize: '20'
              }
            }
          },
          itemStyle: {
            normal: {
              color: '#00acea'
            }
          },
          data: datas
        }, {
          // name: 'pm2.5',
          type: 'effectScatter',
          data: datas,
          symbolSize: function (val) {
            return Math.max(val[2] / 200, 8)
          },
          label: {
            normal: {
              show: true,
              formatter: '{b}',
              color: '#fff',
              textStyle: {
                fontSize: '20'
              }
            }
          },
          itemStyle: {
            normal: {
              color: '#FF8C00',
              position: 'right',
              show: true
            }
          }
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      // 根据窗口的大小变动图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
